<template>
	<div class="filePage w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<button @click="cancel"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="fileLine">
			<span class="tit">文件名称：</span>
			<input type="text" v-model="name"/>
		</div>
		<div class="fileLine heiT">
			<span class="tit">上传文件：</span>
			<!--http://www.h3clearning.com/huathree-back/uploadFile-->
			<el-upload class="upload-demo" action="#" :auto-upload="true" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt" :limit='1' :headers="myHeaders" :http-request="uploadImgList">
  				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<em>文件支持ppt、pptx、xls、doc、docx、pdf格式</em>
			</el-upload>
		</div>
		<div class="fileLine">
			<span class="tit">文件介绍：</span>
			<vue-ueditor-wrap v-model="coursewareFileDes" :config="myConfig" style="margin: 14px 0 0 85px;"></vue-ueditor-wrap>
		</div>
		<div class="footerButton">
			<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
			<a @click="cancel" class="cancel">取消</a>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import alert from '../../components/Alert.vue';
	export default{
		data(){
			return{
				clickLock:true,
				updateTitle:'添加文件',
				updateTitleCourse:'',
				teacherTitle:'',
				lecturerid:'',
				nowType:'add',
				liveId:'',
				id:'',
				name:'',
				coursewareFileUrl:'',
				coursewareFileDes:'',
				coursewareFileBm:'',
				coursewareFileBx:'',
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 320,
					initialFrameWidth: '740'
				},
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods:{
			getParams() {
				let that = this;
				var routerParams = this.$route.params.type;
				this.liveId = this.$route.params.liveId;
				this.updateTitleCourse = this.$route.params.updateTitleCourse;
				this.pathKey = this.$route.params.pathKey;
				this.teacherTitle = this.$route.params.teacherTitle;
				this.lecturerid = this.$route.params.lecturerid;
				if(routerParams == 'edit') {
					that.nowType = 'edit';
					that.updateTitle = "编辑文件";
				}else{
					that.nowType = 'add';
				}
				console.log('file:',this.$route.params);
			},
			add_type(){
				let that = this;
				let s= {
					courseid:that.liveId,
					name:that.name,
					coursewareFileUrl:that.coursewareFileUrl,
					coursewareFileDes:that.coursewareFileDes,
					coursewareFileBm:0,
					coursewareFileBx:0,
					rootcompanyid:1,
					coursewareFilePicture:this.coursewareFilePicture
				};
				if(this.clickLock==true){
					this.clickLock = false;
					this.$ajax({
						url: this.$root.jifuUrl + '/mns/coursewareFile/addCoursewareFile',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: s,					
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功'});
								setTimeout(() =>{
									this.$router.push({
										name: 'courseware',
										params: {
											liveId:this.liveId,
											updateTitle:this.updateTitleCourse,
											pathKey:this.pathKey,
											teacherTitle:this.teacherTitle,
											lecturerid:this.lecturerid
										}
									})
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					})
				}
			},
			edit_type(){
				let that = this;
				let s= {
					id:that.id,
					courseid:that.liveId,
					name:that.name,
					coursewareFileUrl:that.coursewareFileUrl,
					coursewareFileDes:that.coursewareFileDes,
					coursewareFileBm:0,
					coursewareFileBx:0,
					rootcompanyid:1,
					coursewareFilePicture:this.coursewareFilePicture
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/mns/coursewareFile/updateCoursewareFile',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,					
					method: 'POST',
					success: res => {
						if(res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功'});
							setTimeout(() =>{
								this.$router.push({
									name: 'courseware',
									params: {
										liveId:this.liveId,
										updateTitle:this.updateTitleCourse,
										pathKey:this.pathKey,
										teacherTitle:this.teacherTitle,
										lecturerid:this.lecturerid
									}
								})
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave(){
				if (this.nowType == 'add') {
					this.add_type();
				} else if (this.nowType == 'edit') {
					this.edit_type();
				}
			},
			cancel() {
				this.$router.push({
					name: 'courseware',
					params: {
						liveId:this.liveId,
						updateTitle:this.updateTitleCourse,
						pathKey:this.pathKey,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}
				})
			},
			uploadImgList(item){
				let formData = new FormData()
				formData.append('file', item.file)
				this.$ajax({
					url: 'http://www.h3clearning.com/huathree/api/oss/uploadFileConvert/imm/upload',
					data: formData,
					method: 'POST',
					success: res => {
						this.coursewareFilePicture = res.data.data;
						if(res.data.code==200){
							this.$ajax({
								url: 'http://www.h3clearning.com/huathree-back/uploadFile',
								data: formData,
								method: 'POST',
								success: res => {
									if(res.data.code == 200) {
										this.coursewareFileUrl = res.data.data[0];
									};
								}
							})
						}
					}
				})
			}
		},
		components:{
			alert
		},
		mounted(){
			this.getParams();
			if(this.liveId==null){
				this.$store.commit('GET_file');
				var s =this.$store.state.file;
				this.liveId=s.liveId;
				this.updateTitleCourse = s.updateTitleCourse;
				this.teacherTitle = s.teacherTitle;
				this.lecturerid = s.lecturerid;
				this.pathKey = s.pathKey;
			};
			window.addEventListener("beforeunload",()=>{
				s={
					liveId : this.liveId,
					updateTitleCourse:this.updateTitleCourse,
					pageTypeNum:this.pageTypeNum,
					teacherTitle:this.teacherTitle,
					lecturerid:this.lecturerid,
					pathKey:this.pathKey
				}	
				this.$store.commit('SET_file', s);
			});
			if(this.nowType=="edit"){
				console.log('文件--306',this.nowType,this.$root.fileMsg);
				this.id = this.$root.fileMsg.id;
				this.courseid = this.$root.fileMsg.courseid;
				this.name = this.$root.fileMsg.name;
				this.coursewareFileDes = this.$root.fileMsg.coursewareFileDes;
				this.coursewareFileBm = this.$root.fileMsg.coursewareFileBm;
				this.coursewareFileBx = this.$root.fileMsg.coursewareFileBx;
				this.rootcompanyid = this.$root.fileMsg.rootcompanyid;
				this.coursewareFileUrl = this.$root.fileMsg.coursewareFileUrl;
				this.coursewareFilePicture = this.$root.fileMsg.coursewareFilePicture;
				let url = this.$root.fileMsg.coursewareFileUrl;
				if(url!=null && url.indexOf("/") != -1){
					var str = url.substring(url.lastIndexOf("/")+7);
					let m = '<li tabindex="0" class="el-upload-list__item is-success"><a class="el-upload-list__item-name">' + str + '</a><label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-circle-check"></i></label><i class="el-icon-close"></i></li>';
					let s = document.getElementsByClassName('el-upload-list');
					$(s).append(m);
				};
			}
		}
	}
</script>

<style>
	.fileLine{margin-bottom: 20px;position: relative;}
	.fileLine.heiT{height: 60px;}
	.fileLine span{color: #333;}
	.fileLine .tit{font-size: 16px;color: #333;width: 80px;text-align: right;display: inline-block;line-height: 32px;}
	.fileLine input{width: 200px;height: 30px;line-height:30px;border: 1px solid #ccc;padding-left: 10px;color: #666;font-size: 14px;border-radius: 5px;}
	.fileLine.heiT .el-radio{display: block;margin-bottom: 5px;}
	.fileLine .fileR{position: absolute;top: 0;left: 84px;}
	.fileLine em{display: block;font-size: 14px;color: #999;font-style: normal;margin-top: 8px;}
	.fileLine .el-select,.fileLine .el-select input{width: 212px;height: 32px;line-height: 32px;}
	.fileLine .el-select .el-select__caret{height: 32px;line-height: 32px;}
	
	.fileLine .upload-demo{display: inline-block;position: absolute;top: 0;left: 86px;}
	.fileLine .el-button--small{padding: 8px 12px;}
	.fileLine .upload-demo .el-upload span{font-size: 14px;color: #fff;}
	.fileLine .upload-demo .el-button--success span{font-size: 14px;color: #fff;}
	.fileLine .upload-demo .el-upload-list{position: absolute;top: 0;left: 102px;line-height: 36px;width: 120px;text-overflow: ellipsis;overflow: hidden;box-sizing: border-box;height: 32px;}
	.fileLine .file_name{position: absolute;top: 0;left: 184px;line-height: 36px;width: 120px;text-overflow: ellipsis;overflow: hidden;box-sizing: border-box;font-size: 14px;color: #606266;white-space: nowrap;}
	.fileLine .upload-demo .el-upload-list__item{height: 35px;line-height: 35px;position: absolute;left: 0;margin-top: 0;background: #fff;}
	./*fileLine .el-upload-list__item-status-label,.fileLine .el-icon-close,.fileLine .el-icon-close-tip{display: none!important;opacity: 0!important;}*/
	.fileLine .el-upload-list__item-name{width: 110px!important;transition: none !important;}
</style>